<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>工厂生产情况</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #fff;
        }

        th, td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }

        th {
            background-color: #f8f8f8;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .progress-bar {
            width: 100%;
            background-color: #f3f3f3;
            border-radius: 5px;
        }

        .progress-bar-inner {
            height: 20px;
            border-radius: 5px;
            background-color: #4caf50;
            width: 0;
            transition: width 0.5s ease-in-out;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const eventSource = new EventSource("/view/factoryList");

            eventSource.onmessage = function(event) {
                const factories = JSON.parse(event.data);
                const factoryTableBody = document.getElementById('factoryTableBody');
                factoryTableBody.innerHTML = '';

                factories.forEach(factory => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${factory.id}</td>
                        <td>${factory.name}</td>
                        <td>${factory.warehouseSize}</td>
                        <td>${factory.productName}</td>
                        <td>${factory.productNums}</td>
                        <td>${factory.productionSpeed}</td>
                        <td>${factory.acceleration}</td>
                        <td>
                            <div class="progress-bar"></div>
                                <div class="progress-bar-inner" style="width: ${factory.productionProgress * 100}%;"></div></div>
                            </div>
                        </td>
                    `;
                    factoryTableBody.appendChild(row);
                });
            };
        });
    </script>
</head>
<body>
<h1>工厂生产情况</h1>
<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>名称</th>
        <th>仓库容量</th>
        <th>产品名称</th>
        <th>产品数量</th>
        <th>生产速度</th>
        <th>加速</th>
        <th>生产进度</th>
    </tr>
    </thead>
    <tbody id="factoryTableBody">
    <tr th:each="factory : ${factories}">
        <td th:text="${factory.id}"></td>
        <td th:text="${factory.name}"></td>
        <td th:text="${factory.warehouseSize}"></td>
        <td th:text="${factory.productName}"></td>
        <td th:text="${factory.productNums}"></td>
        <td th:text="${factory.productionSpeed}"></td>
        <td th:text="${factory.acceleration}"></td>
        <td>
            <div class="progress-bar"></div>
            <div class="progress-bar-inner" th:style="'width: ' + ${factory.productionProgress * 100} + '%'"></div></div>
            </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
